<template>
	<view class="index-container">
		<view class="header">
			<view class="left">学加家</view>
			<view class="right">
				<image src="../../static/Icon/index/QrCode.png" mode=""></image>
				<view @click="goToQrCode()">
					我的二维码
				</view>
			</view>
		</view>
		<view class="anno">
			<view class="annoBox">
				<view class="annoBottomBox">
					<text class="iconfont icon-icon-test35"></text>
					<picker @change="changeChild" :value="index" :range="array" range-key="name">
						<view>切换孩子(当前：{{childName}})</view>
					</picker>
				</view>
			</view>

		</view>
		<view class="anno">
			<view class="annoBox">
				<!-- <swiper 
					:indicator-dots="true"
					indicator-color="rgba(0,0,128 ,1.0)"
					indicator-active-color="#ffffff"
					circular>
					<swiper-item v-for="(item,index) in annoList" @click="goToAnnoDetail(item.id)" :key="index">
						<view class="swiper-item">
							<text>{{item.title}}</text>
						</view>
					</swiper-item>
				</swiper> -->

				<view class="annoBottomBox" @click="goToAnno()">
					<text class="iconfont icon-gonggaoxinxi"></text>
					<view>
						公告列表
					</view>
					<text class="arr iconfont icon-icon-test61"></text>
				</view>
			</view>
		</view>
		<view class="function">
			<view class="functionItem">
				<view class="top">
					<view class="title">
						功能
					</view>
					<!-- <view class="arr">
						<view>
							全部
						</view>
						<text class="iconfont icon-icon-test61"></text>
					</view> -->
				</view>
				<view class="bottom">
					<view class="functionIcon" @click="goToJob()">
						<view class="Icon">
							<image src="../../static/Icon/index/Anno.png" mode=""></image>
						</view>
						<view class="content">
							作业
						</view>
					</view>
					<view class="functionIcon" @click="goToLeave()">
						<view class="Icon">
							<image src="../../static/Icon/index/parking.png" mode=""></image>
						</view>
						<view class="content">
							请假
						</view>
					</view>
					<view class="functionIcon" @click="goToHealth()">
						<view class="Icon">
							<image src="../../static/Icon/index/QrCodeF.png" mode=""></image>
						</view>
						<view class="content">
							带药提醒
						</view>
					</view>
					<view class="functionIcon" @click="goToQrCode()">
						<view class="Icon">
							<image src="../../static/Icon/index/Weather.png" mode=""></image>
						</view>
						<view class="content">
							相册
						</view>
					</view>
					<view class="functionIcon" @click="goToVoteList()">
						<view class="Icon">
							<image src="../../static/Icon/index/Order.png" mode=""></image>
						</view>
						<view class="content">
							投票
						</view>
					</view>
					<!-- <view class="functionIcon" @click="goToVisitor()">
						<view class="Icon">
							<image src="../../static/Icon/index/visitor.png" mode=""></image>
						</view>
						<view class="content">
							我的访客
						</view>
					</view>
					<view class="functionIcon" @click="goToParking()">
						<view class="Icon">
							<image src="../../static/Icon/index/parking.png" mode=""></image>
						</view>
						<view class="content">
							我的车位
						</view>
					</view>
					<view class="functionIcon" @click="goToErrorNull()">
						<view class="Icon">
							<image src="../../static/Icon/index/devv.png" mode=""></image>
						</view>
						<view class="content">
							正在开发
						</view>
					</view>
					<view class="functionIcon" @click="goToErrorNull()">
						<view class="Icon">
							<image src="../../static/Icon/index/devv.png" mode=""></image>
						</view>
						<view class="content">
							正在开发
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="order">
			<view class="orderItem">
				<view class="top">
					<view class="title">
						今日作业
					</view>
					<view class="arr" @click="goToJob()">
						<view>
							全部
						</view>
						<text class="iconfont icon-icon-test61"></text>
					</view>
				</view>
				<view class="bottom">
					<view class="orderInfo" v-for="(item,index) in todayJobList" :key="index">
						<view class="orderInfo-Left">
							<image src="../../static/Icon/index/Anno.png" mode=""></image>
						</view>
						<view class="orderInfo-Right">
							<view class="orderInfo-Right-Left">
								<view class="orderInfo-Right-Left-Top">
									{{item.subject}}
								</view>
								<view class="orderInfo-Right-Left-Bottom">
									{{item.content}}
								</view>
							</view>
							<view class="orderInfoRight-Right">
								<view class="bottonWait" v-if="item.jobSubmit.status=='a'"
									@click="PostJob(item.jobSubmit.id)">
									<text>待审批</text>
								</view>
								<view class="bottonWait" v-if="item.jobSubmit.status=='b'"
									@click="submitJob(item.jobSubmit.id)">
									<text>已审批</text>
								</view>
								<view class="bottonUn" v-if="item.jobSubmit.status=='c'"
									@click="PostJob(item.jobSubmit.id)">
									<text>未提交</text>
								</view>
							</view>
						</view>
					</view>
					<view class="noData" v-if="todayJobList.length == 0">
						<image src="../../static/Icon/index/noData.png" mode=""></image>
						<view>
							暂无作业
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="order">
			<view class="orderItem">
				<view class="top">
					<view class="title">
						近期访客
					</view>
					<view class="arr" @click="goToVisitor()">
						<view>
							全部
						</view>
						<text class="iconfont icon-icon-test61"></text>
					</view>
				</view>
				<view class="bottom">
					<view class="orderInfo" v-for="(item,index) in visitorList" :key="index">
						<view class="orderInfo-Left">
							<image src="../../static/Icon/index/OrderItem.png" mode=""></image>
						</view>
						<view class="orderInfo-Right">
							<view class="orderInfo-Right-Left">
								<view class="orderInfo-Right-Left-Top">
									<text>
										访客：{{item.visitorName}}
									</text>
								</view>
								<view class="orderInfo-Right-Left-Bottom">
									<text>预约时间：{{item.appointment}}</text>
								</view>
							</view>
							<view class="orderInfoRight-Right">
								<view class="botton" @click="goDeatilVisitor(item.visitorSignkey)">
									查看
								</view>
							</view>
						</view>
					</view>
					<view class="noData" v-if="visitorList.length == 0">
						<image src="../../static/Icon/index/noData.png" mode=""></image>
						<view>
							暂无访客数据
						</view>
					</view>
				</view>
			</view>
		</view> -->
		<fui-dialog :show="dialog.show" :title="dialog.title" :content="dialog.content" :buttons="dialog.buttons"
			:maskClosable="false" @click="onTap"></fui-dialog>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visitorList: [],
				annoList: [],
				todayJobList: [],
				userInfo: {},
				ownerInfo: {
					signKey: '',
					buildingId: ''
				},
				dialog: {
					flag: 1,
					show: false,
					title: '自定义对话框',
					content: '自定义对话框内容',
					buttons: [{
							text: '我是房主',
							color: '#0041da'
						},
						{
							text: '我是业主',
							color: '#6831ff'
						}
					],
					submitted: false
				},
				children: [],
				array: [],
				index: 0,
				Ttoken: '',
				childName: '',
				studentId: ""
			};
		},
		onLoad() {
			// this.getToken();
			this.studentId = uni.getStorageSync('studentId');
			this.getTodayAllJob();
			this.getChildren();

		},
		onShow() {
			// this.getOrderInfoList()
			// this.getToken();

		},
		methods: {
			//根据登录的学生id查询作业
			getTodayAllJob() {
				this.$myReq({
						url: `/job/api/jobSubmit/getTodayAllJob/` + this.studentId,
						method: 'get'
					})
					.then((res) => {
						console.log(res.data)
						this.todayJobList = res.data
					})
					.catch((err) => {
						console.log(err)
					})
			},
			//作业页面
			submitJob(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/Job/submitJob?id=' + id
				});

			},
			PostJob(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/Job/PostJob?id=' + id
				});
			},
			//作业
			goToJob() {
				uni.navigateTo({
					url: '/pages/Job/Job'
				});
			},
			//切换孩子
			changeChild(e) {
				let index = e.detail.value;
				uni.setStorageSync('studentId', this.array[index].id);
				let a = this.array[index];
				console.log(index, a, a.id, a.name);
				this.childName = a.name;
				console.log("childName : ", this.childName)

			},
			getChildren() {
				this.studentId = uni.getStorageSync('studentId');
				this.$myReq({
						url: `/manage/api/student/getMyChildren`,
						method: 'get'
					})
					.then((res) => {
						this.children = res.data;
						for (let child of this.children) {
							let a = {
								id: child.id + '',
								name: child.schoolName + ' - ' + child.klassName + ' - ' + child.name
							}
							this.array.push(a);
						}
						for (let index in this.array) {
							if (this.array[index].id == this.studentId) {
								
								this.index = index;
								this.childName = this.array[index].name
								break;
							}
						}
						console.log(this.index, this.childName)
					})
					.catch((err) => {
						console.log(err)
					})
			},
			//去访客详情
			goDeatilVisitor(visitorSignkey) {
				uni.navigateTo({
					url: '../visitor/qrCodeVisitor/qrCodeVisitor?visitorSignkey=' + visitorSignkey,
					fail: (err) => {
						console.log(err)
					}
				})
			},
			//获得近期访客
			getRecentlyVisitor() {
				// console.log("in")
				this.$myReq({
						url: `/owner/visitor/tomorrowVisitorPageList/${this.userInfo.signKey}/1/4`,
						method: 'POST'
					})
					.then((res) => {
						// console.log(res)
						this.visitorList = res.data.records
					})
					.catch((err) => {
						console.log(err)
					})
			},

			goToErrorNull() {
				uni.navigateTo({
					url: '../errorPage/nullPage/nullPage'
				})
			},
			goToVisitor() {
				uni.navigateTo({
					url: '../visitor/visitor'
				})
			},
			goToParking() {
				uni.navigateTo({
					url: '../parking/parking'
				})
			},
			goToVoteList() {
				uni.navigateTo({
					url: '../vote/voteList'
				})
			},
			goToQrCode() {
				uni.navigateTo({
					url: '../photo/photo'
				})
			},
			goToAnnoDetail(id) {
				uni.navigateTo({
					url: '../announcement/annDetail/annDetail?annId=' + id,
				})
			},
			goToAnno() {
				uni.navigateTo({
					url: '../announcement/announcement'
				})
			},
			goToLeave() {
				uni.navigateTo({
					url: '../leave/leaveList?childName=' + this.childName
				})
			},
			goToHealth() {
				uni.navigateTo({
					url: '../health/healthList?childName=' + this.childName
				})
			},
			getAnnoList() {
				this.$myReq({
						url: `/owner/annOwner/annsByKeyWord/${this.ownerInfo.buildingId}/1/4`,
						method: 'POST'
					})
					.then((res) => {
						this.annoList = res.data.records
						// console.log(res)
					})
			},
			getOrderInfoList() {
				this.$myReq({
						url: '/owner/facilityOrder/getTodayOrderRecord/' + this.userInfo.signKey,
						method: 'POST'
					})
					.then((res) => {
						this.orderList = res.data
						// console.log(res)
					})
			},
			onTap(res) {
				if (this.dialog.flag == 1) {
					if (res.index == 1) {
						//尚未被批准的审核应当取消使用首页的功能
						uni.navigateTo({
							url: '../userInfoPage/improveInfo/ownerImproveInfo',
							success: () => {
								this.dialog.show = false;
							}
						});
						this.dialog.show = false;
					} else {
						uni.navigateTo({
							url: '../userInfoPage/improveInfo/improveInfo',
							success: () => {
								this.dialog.show = false;
							}
						});
					}
				} else {
					this.dialog.show = false;
				}
			},
			getToken() {
				// console.log('进入从缓存中获得Token的方法')
				var token;
				uni.getStorage({
					key: 'userToken',
					success(res) {
						// console.log('成功获取缓存')
						token = res.data;
					}
				});
				// var token = uni.getStorageSync('userToken');
				setTimeout(() => {
					// console.log('token',token)
					this.getUserInfo(token);
				}, 100);
			},
			getOwnerInfo() {
				this.$myReq({
						url: '/owner/ownerInfo/getOwnerInfoBySignKey/' + this.userInfo.signKey,
						method: 'POST'
					})
					.then((res) => {
						this.ownerInfo = res.data
						this.getAnnoList()
						this.getOrderInfoList()
					})
					.catch((err) => {
						console.log(err)
					})
			},
			getUserInfo(token) {
				// console.log('getUserInfo中获得的Token',token)
				this.$myReq({
						url: '/owner/login/loginUserInfo/' + token,
						method: 'GET'
					})
					.then(res => {
						this.userInfo = res.data;
						// 如果用户没有被审核且没有提交申请
						// if(this.userInfo.bind == 0 && this.userInfo.submitted == 0){
						if (this.userInfo.bind == 0) {
							this.dialog.content = '您尚未绑定房产信息，请先完善个人信息！';
							this.dialog.title = '提示';
							this.dialog.show = true;
						}
						if (this.userInfo.bind == 0 && this.userInfo.submitted == 1) {
							this.dialog.content = '您的审核尚未被物业通过请等待！';
							let button = {
								text: '我知道了',
								color: '#0041da'
							}
							this.dialog.buttons = [button]
							this.dialog.title = '提示'
							this.dialog.show = true;
							this.dialog.submitted = true
							this.dialog.flag = 0
						}
						if (this.userInfo.bind == 1 && this.userInfo.submitted == 1) {
							this.getOwnerInfo();
						}
						this.getRecentlyVisitor()
					})
					.catch(err => {
						console.log('err', err);
					});
			}
		}
	};
</script>

<style lang="scss">
	// box-shadow: 0rpx 0rpx 4rpx 4rpx #e1e1e1;
	page {
		background-color: #f2f2f6;
		/* f6f6f8 */
	}

	.header {
		padding: 10rpx 30rpx 20rpx 30rpx;
		background-color: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.left {
			// border: 1px solid red;
			// line-height: 50rpx;
			// height: 80rpx;
			font-size: 40rpx;
			font-weight: bold;
			line-height: 50rpx;
		}

		.right {
			display: flex;
			flex-wrap: wrap;

			image {
				height: 40rpx;
				width: 40rpx;
				// border: 1px solid red;
				margin-right: 15rpx;
			}

			view {
				// border: 1px solid red;
				line-height: 40rpx;
				font-size: 30rpx;

			}
		}
	}

	.anno {
		padding: 20rpx 15rpx 20rpx 15rpx;
		// border: 1px solid red;
		background-color: #f7f7fa;

		.annoBox {
			box-shadow: 0rpx 0rpx 4rpx 4rpx #ececec;
			// border: 1px solid red;
			border-radius: 30rpx;
			background-color: #FFFFFF;
			overflow: hidden;

			swiper {
				swiper-item {
					background-image: url(https://s4.ax1x.com/2021/12/11/oHAzV0.png);
					background-repeat: no-repeat;
					background-size: 100%;
					background-position: 0% 0%;

					// border: 1px solid yellow;
					text {
						position: relative;
						font-size: 40rpx;
						font-weight: bold;
						width: 450rpx;
						line-height: 70rpx;
						width: 400rpx;
						top: 70rpx;
						left: 40rpx;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal !important;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						// border: 1px solid red;
						color: white;
					}
				}
			}

			.annoBottomBox {
				// border: 1px solid red;
				padding-left: 35rpx;
				height: 90rpx;
				line-height: 90rpx;
				display: flex;
				flex-wrap: wrap;

				text:nth-child(1) {
					margin-right: 20rpx;
					line-height: 90rpx;
					height: 90rpx;
					font-size: 40rpx;
					color: #ff9200;
				}

				.arr {
					height: 90rpx;
					display: inline-block;
					// border: 1px solid red;
					font-size: 40rpx;
					line-height: 96rpx;
				}
			}
		}
	}

	.function {
		padding: 0rpx 15rpx 20rpx 15rpx;

		// background-color: #f7f7fa;
		.functionItem {
			box-shadow: 0rpx 2rpx 4rpx 4rpx #ececec;
			border-radius: 30rpx;
			padding: 30rpx 35rpx 30rpx 35rpx;
			background-color: #FFFFFF;

			.top {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				border-bottom: 1px solid #e1e1e1;

				// padding-bottom: 10rpx;
				.title {
					border-bottom: 2px solid $main-colorB;
					padding-bottom: 10rpx;
					// border: 1px solid red;
					height: 50rpx;
					font-size: 35rpx;
					line-height: 50rpx;
				}

				.arr {
					display: flex;
					flex-wrap: wrap;
					height: 50rpx;
					font-size: 30rpx;
					line-height: 70rpx;
					color: $main-garyB;

					// border: 1px solid red;
					text {
						font-size: 35rpx;
					}
				}
			}

			.bottom {
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.functionIcon:nth-child(1) {
					margin-bottom: 20rpx;
				}

				.functionIcon {
					width: 150rpx;

					.Icon {
						width: 110rpx;
						height: 110rpx;
						// border: 1px solid red;
						margin: 0 auto;

						image {
							width: 100%;
							height: 100%;
						}

						margin-bottom: 10rpx;
					}

					.content {
						// border: 1px solid red;
						text-align: center;
						color: #4a4a4a;
						width: 150rpx;
						font-size: 25rpx;
					}
				}
			}
		}
	}

	.order {
		padding: 0rpx 15rpx 20rpx 15rpx;

		.orderItem {
			box-shadow: 0rpx 2rpx 4rpx 4rpx #ececec;
			border-radius: 30rpx;
			padding: 30rpx 35rpx 10rpx 35rpx;
			background-color: #FFFFFF;

			.top {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				border-bottom: 1px solid #e1e1e1;
				margin-bottom: 20rpx;

				// padding-bottom: 10rpx;
				.title {
					border-bottom: 2px solid $main-colorB;
					padding-bottom: 10rpx;
					// border: 1px solid red;
					height: 50rpx;
					font-size: 35rpx;
					line-height: 50rpx;
				}

				.arr {
					display: flex;
					flex-wrap: wrap;
					height: 50rpx;
					font-size: 30rpx;
					line-height: 70rpx;
					color: $main-garyB;

					// border: 1px solid red;
					text {
						font-size: 35rpx;
					}
				}
			}

			.bottom {

				// height: 500rpx;
				.orderInfo {
					display: flex;
					flex-wrap: wrap;
					height: 100rpx;
					margin-top: 10rpx;
					margin-bottom: 10rpx;

					.orderInfo-Left {
						display: flex;
						align-items: center;
						height: 100rpx;
						width: 100rpx;

						image {
							height: 60rpx;
							width: 66rpx;
						}
					}

					.orderInfo-Right {
						// border: 1px solid red;
						border-bottom: 1px solid #ececec;
						padding-bottom: 5rpx;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						height: 100rpx;
						width: 555rpx;

						// 550
						.orderInfo-Right-Left {
							// border: 1px solid blue;
							height: 100rpx;

							// margin-top: 10rpx;
							.orderInfo-Right-Left-Top {
								font-size: 35rpx;
								// border: 1px solid red;
								margin-bottom: 10rpx;
							}

							.orderInfo-Right-Left-Bottom {
								font-size: 25rpx;
								// border: 1px solid red;
								color: $main-garyB;
								// position: relative;
								// top: 10rpx;
							}
						}

						.orderInfoRight-Right {
							// border: 1px solid green;
							width: 120rpx;
							display: flex;
							align-items: center;

							.botton {
								text-align: center;
								line-height: 60rpx;
								border-radius: 10rpx;
								background-color: #dadada;
								// border: 1px solid #919191;
								color: #3b3b3b;
								width: 120rpx;
								height: 60rpx;
							}

							.bottonWait {
								text-align: center;
								line-height: 60rpx;
								border-radius: 10rpx;
								background-color: #e3ffd8;
								// border: 1px solid #919191;
								color: seagreen;
								width: 120rpx;
								height: 60rpx;
							}

							.bottonUn {
								text-align: center;
								line-height: 60rpx;
								border-radius: 10rpx;
								background-color: #daadae;
								// border: 1px solid #919191;
								color: #c87c8c;
								width: 120rpx;
								height: 60rpx;
							}
						}
					}
				}
			}
		}

		.noData {
			margin: 0 auto;
			width: 250rpx;
			margin-bottom: 40rpx;

			image {
				width: 250rpx;
				height: 250rpx;
			}

			view {
				text-align: center;
				color: $main-garyB;
			}
		}
	}
</style>
